<template>
  <div class="card content-box">
    <div class="table-box">
      <ProTable ref="proTable" title="用户列表" :columns="columns" :request-api="getTableList">
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <el-button v-auth="'sys:sys_user:save'" type="primary" :icon="CirclePlus" @click="onSave">新增用户</el-button>
          <el-button
            v-auth="'sys:sys_user:delete'"
            type="danger"
            :icon="Delete"
            plain
            :disabled="!scope.isSelected"
            @click="batchDelete(scope.selectedListIds)"
          >
            批量删除
          </el-button>
        </template>
        <!-- 用户操作 -->
        <template #operation="scope">
          <el-button v-auth="'sys:sys_user:update'" type="primary" link :icon="EditPen" @click="onUpdate(scope.row)">
            编辑
          </el-button>
          <el-button v-auth="'sys:sys_user:delete'" type="danger" link :icon="Delete" @click="onDelete(scope.row)">
            删除
          </el-button>
        </template>
      </ProTable>
      <UserOperateDrawer ref="drawerRef"></UserOperateDrawer>
    </div>
  </div>
</template>

<script setup lang="ts" name="accountManage">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { ref } from "vue";
import { addUser, deleteUser, editUser, getUserList, SysUserInfoResult } from "@/api/modules/sys/user";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { getEnumDictItem } from "@/api/modules/sys/dict";
import { getSysDeptTree } from "@/api/modules/sys/dept";
import UserOperateDrawer from "@/views/system/accountManage/UserOperateDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { getRoleList } from "@/api/modules/sys/role";

// 表格配置项
const columns: ColumnProps[] = [
  { type: "selection", fixed: "left", width: 70 },
  { prop: "nickName", label: "用户昵称", search: { el: "input", tooltip: "用户昵称" } },
  { prop: "email", label: "电子邮箱" },
  { prop: "mobile", label: "移动电话" },
  {
    prop: "userStatus",
    label: "用户状态",
    enum: () => getEnumDictItem("SysUserStatus"),
    search: { el: "input", tooltip: "用户状态" }
  },
  {
    prop: "deptInfo.id",
    label: "所属部门",
    enum: () => getSysDeptTree(),
    search: {
      el: "tree-select",
      key: "deptId",
      tooltip: "所属部门",
      props: { checkStrictly: true }
    },
    fieldNames: { label: "deptName", value: "id" }
  },
  {
    prop: "roleIdList",
    label: "拥有角色",
    isShow: false,
    isSetting: false,
    enum: () => getRoleList(),
    search: { el: "select", tooltip: "角色" },
    fieldNames: { label: "roleName", value: "id" }
  },
  { prop: "operation", label: "操作", fixed: "right" }
];

const proTable = ref<ProTableInstance>();

const getTableList = param => {
  return getUserList(param);
};

const drawerRef = ref<InstanceType<typeof UserOperateDrawer> | null>(null);

const onSave = () => {
  drawerRef.value?.openDrawer({
    title: "新增",
    isSave: true,
    isUpdate: false,
    row: {},
    api: addUser,
    getTableList: proTable.value?.getTableList,
    enumMap: proTable.value?.enumMap
  });
};

const onUpdate = (row: Partial<SysUserInfoResult> = {}) => {
  drawerRef.value?.openDrawer({
    title: "更新",
    isSave: false,
    isUpdate: true,
    row: { ...row },
    api: editUser,
    getTableList: proTable.value?.getTableList,
    enumMap: proTable.value?.enumMap
  });
};

// 删除信息
const onDelete = async (row: SysUserInfoResult) => {
  await useHandleData(deleteUser, [row.id], `删除【${row.nickName}】`);
  proTable.value?.getTableList();
};

// 批量删除
const batchDelete = async (ids: string[]) => {
  await useHandleData(deleteUser, ids, "删除所选信息");
  proTable.value?.clearSelection();
  proTable.value?.getTableList();
};
</script>
